<template>
  <div class="my-order">
    <nav-bar
      title="我的订单"
      left-text="返回首页"
      left-arrow
      @click-left="onClickLeft"
    />
    <empty description="暂无订单" v-show="show" />
    <card
      v-for="item in orderList"
      :num="item.amount"
      :price="(item.price * item.amount).toFixed(2)"
      :title="item.product.name"
      :thumb="dalImg(item.product.coverImage)"
    >
      <template #tags>
        <tag plain type="danger" style="display: block; margin: 8px 0"
          >交易完成</tag
        >
        <tag plain type="danger" style="color: #ee0a24">实付款：</tag>
      </template>
      <template #footer>
        <Button size="mini" type="primary">商家已接单</Button>
        <Button size="mini" type="success">再来一单</Button>
      </template>
    </card>
    <submit-bar :button-text="'￥' + sumPrice">
      <label>合计：</label>
    </submit-bar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Empty, Card, Button, Icon, NavBar, SubmitBar } from "vant";
import { useRouter } from "vue-router";
import { dalImg } from "../utils/tools";
import { loadOrderAPI } from "../server/order";

const router = useRouter();
const onClickLeft = () => {
  // history.back();
  router.push({
    name: "home",
  });
  setTimeout(() => {
    location.reload();
  }, 100);
};
const sumPrice = ref(0);
const orderList = ref([]);
const show = ref(true);
// 加载订单信息
loadOrderAPI().then((res) => {
  // console.log(res);
  // console.log(res);
  if (res.total > 0) {
    show.value = false;
    orderList.value = res.data[0].details;
    sumPrice.value = res.data[0].details
      .reduce((pre, cur) => pre + cur.amount * cur.price, 0)
      .toFixed(2);
  } else {
    show.value = true;
    sumPrice.value = 0;
  }
});
</script>

<style scoped lang="scss"></style>
